In an application I get a right hand side sidebar with a vertical scrollbar. As the result if the user has moved the sidebar to the right-most part of the screen, there is 2 vertical sidebars side by side: the one of sidebar + the one of the browser.
I get an issue with FireFox(101.0.1)/Win11(21H2) when the Windows option ‘Always show scrollbars’ is off. As FireFox is ‘hiding’ scrollbars, the locations where the scrollbars appear overlap. As the result it is not possible to mouse over and display the sidebar’s scrollbar. It is possible to replicate the issue with the code snippet below.
By writing a few lines of javascript I can hide the browser’s scrollbar when the cursor is coming from the sidebar. However I didn’t find any way to detect if I have to make the fix active.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width:200vw; height:200vh; background-color:lightblue;"></div>
<div style="position:fixed; width:50vw; height:50vh; bottom:0px; right:0px; overflow:auto;">
<div style="width:200vw; height:200vh; background-color:lightgreen;"></div>
</div>
</body>
</html>